<template>
  <div>
      <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>美多商城-提交订单</title>
    <link rel="stylesheet" type="text/css" href="/static/css/reset.css">
    <link rel="stylesheet" type="text/css" href="/static/css/main.css">
</head>
<body>
    <div id="app">
    
    <myheader></myheader>
    <div class="search_bar clearfix">
        <a href="index.html" class="logo fl"><img src="/static/images/logo.png"></a>
        <div class="sub_page_name fl">|&nbsp;&nbsp;&nbsp;&nbsp;提交订单</div>
        <form method="get" action="/search.html" class="search_con fr mt40">
            <input type="text" class="input_text fl" name="q" placeholder="搜索商品">
            <input type="submit" class="input_btn fr" name="" value="搜索">
        </form>
    </div>

    <h3 class="common_title" style="text-align:left">确认收货地址</h3>

    <div class="common_list_con clearfix" style="text-align:left">
        <dl>
            <dt>寄送到：</dt>
            <dd v-for="address in address_list" :key="address.id"><input type="radio" name="get_site" >{{ address.province }} {{address.city}} {{ address.district }} {{ address.place }} （{{ address.receiver }} 收） {{ address.moblie }}</dd>
        </dl>
        <router-link to="/addaddress" class="edit_site">编辑收货地址</router-link>
    </div>

    <h3 class="common_title" style="text-align:left">支付方式</h3>
    <div class="common_list_con clearfix">
        <div class="pay_style_con clearfix">
            <input type="radio" name="pay_style" value="1" v-model="pay_method">
            <label class="cash">货到付款</label>
            <input type="radio" name="pay_style" value="2" v-model="pay_method">
            <label class="zhifubao"></label>
        </div>
    </div>

    <h3 class="common_title" style="text-align:left">商品列表</h3>

    <div class="common_list_con clearfix">
        <ul class="goods_list_th clearfix">
            <li class="col01">商品名称</li>
            <li class="col03">商品价格</li>
            <li class="col04">数量</li>
            <li class="col05">小计</li>
        </ul>
        <ul class="goods_list_td clearfix" v-for="(cart,index) in cart_list" :key="cart.id">
            <li class="col01">{{index+1}}</li>
            <li class="col02"><img :src="'http://127.0.0.1:8000/'+cart.goods.pic"></li>
            <li class="col03">{{ cart.goods.name }}</li>
            <li class="col05">{{ cart.goods.price }}元</li>
            <li class="col06">{{ cart.num }}</li>
            <li class="col07">{{ cart.goods.price*cart.num }}元</li>
        </ul>
    </div>
    <h3 class="common_title" style="text-align:left">选择优惠券</h3>

    <p v-for="(coupon,index) in coupon_list" :key="index" ><input type="radio" name="coupon" v-model="money" :value="coupon.money">{{coupon.title}}</p>
    

    <h3 class="common_title" style="text-align:left">总金额结算</h3>

    <div class="common_list_con clearfix">
        <div class="settle_con">
            <div class="total_goods_count">共<em>{{ total_count }}</em>件商品，总金额<b>{{ total_amount }}元</b></div>
            <div class="transit">运费：<b>{{ freight }}元</b></div>
            <div class="transit">优惠：<b>{{ money }}元</b></div>
            <div class="total_pay">实付款：<b>{{ total_amount- freight-money}}元</b></div>
        </div>
    </div>

    <div class="order_submit clearfix">
        <a @click="on_order_submit" id="order_btn">提交订单</a>
    </div>
    <div class="popup_con">
        <div class="popup">
            <p>订单提交成功！</p>
        </div>

        <div class="mask"></div>
    </div>
    </div>
</body>
  </div>
</template>

<script>

import myheader from '@/components/Header'

export default {
    data(){
        return {
            pay_method:"",
            total_count:0,
            total_amount:0,
            freight:10,
            payment_amount:0,
            skus:[],
            address_list:[],
            cart_list:[],
            coupon_list:[],
            money:0,

        }
    },
    components:{
        myheader
    },
    methods:{
        on_order_submit(){

        }
    },
    created(){

        const token=sessionStorage.getItem("token")

        if(!token){
            alert("没有登录，请先去登录")
            //如果令牌不存在，证明我们没有登录 先去登录
            this.$router.push({"path":"/login","query":{"back":"/order"}})
            return
        }

        this.axios.get("/address",{"headers":{"Authorization":token}}).then(resp=>{
            console.log(resp.data)
            this.address_list=resp.data
        }).catch(error=>{
            console.log(error)
        })
        this.axios.get("/carts?flag=order",{"headers":{"Authorization":token}}).then(resp=>{
            console.log(resp.data)
            this.cart_list=resp.data

            // 计算出 购买商品的总金额
            for(let i=0;i<this.cart_list.length;i++){
                this.total_count+=this.cart_list[i].num
                this.total_amount+=this.cart_list[i].num*this.cart_list[i].goods.price
            }


        }).catch(error=>{
            console.log(error)
        })

        this.axios.get("/coupon",{"headers":{"Authorization":token}}).then(resp=>{
            console.log(resp.data)
            this.coupon_list=resp.data
        }).catch(error=>{
            console.log(error)
        })

        

    }
}
</script>

<style>

</style>